/* 基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 定义主题变量 */
:root {
  /* 主题色 */
  --primary-color: #367834;
  --primary-color-light: #52af4c;
  --primary-color-dark: #2a6029;
  --primary-color-bg: rgba(82, 175, 76, 0.1);
  
  /* 状态色 */
  --success-color: #67c23a;
  --warning-color: #e6a23c;
  --danger-color: #f56c6c;
  --info-color: #909399;
  
  /* 文本色 */
  --text-primary: #303133;
  --text-regular: #606266;
  --text-secondary: #909399;
  --text-placeholder: #c0c4cc;
  
  /* 边框色 */
  --border-color: #dcdfe6;
  --border-color-light: #e4e7ed;
  --border-color-lighter: #ebeef5;
  --border-color-extra-light: #f2f6fc;
  
  /* 背景色 */
  --bg-color: #ffffff;
  --bg-color-page: #f5f7fa;
  --bg-color-overlay: #ffffff;
  
  /* 阴影 */
  --box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  --box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.1);
  --box-shadow-dark: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
  
  /* 边框圆角 */
  --border-radius-small: 2px;
  --border-radius-base: 4px;
  --border-radius-large: 8px;
  --border-radius-round: 20px;
  --border-radius-circle: 50%;
  
  /* 动画时间 */
  --transition-time: 0.3s;
}

/* 深色模式主题变量 */
[data-theme='dark'] {
  /* 主题色 */
  --primary-color: #52af4c;
  --primary-color-light: #6fd167;
  --primary-color-dark: #367834;
  --primary-color-bg: rgba(82, 175, 76, 0.2);
  
  /* 文本色 */
  --text-primary: #e5eaf3;
  --text-regular: #cfd3dc;
  --text-secondary: #a3a6ad;
  --text-placeholder: #8d9095;
  
  /* 边框色 */
  --border-color: #4c4d4f;
  --border-color-light: #414243;
  --border-color-lighter: #363637;
  --border-color-extra-light: #2e2e2f;
  
  /* 背景色 */
  --bg-color: #141414;
  --bg-color-page: #0a0a0a;
  --bg-color-overlay: #1d1e1f;
  
  /* 阴影 */
  --box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
  --box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.4);
  --box-shadow-dark: 0 4px 16px 0 rgba(0, 0, 0, 0.5);
}

/* 全局样式 */
.dark-mode {
  background-color: var(--bg-color);
  color: var(--text-primary);
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-color-light);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border-color);
}

/* 全局过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--transition-time);
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 卡片阴影效果 */
.hover-shadow {
  transition: box-shadow var(--transition-time), transform var(--transition-time);
}

.hover-shadow:hover {
  box-shadow: var(--box-shadow-dark);
  transform: translateY(-2px);
}

/* 施肥状态颜色 */
.fertilizing-status-green {
  color: var(--success-color);
}

.fertilizing-status-yellow {
  color: var(--warning-color);
}

.fertilizing-status-red {
  color: var(--danger-color);
}

/* 通用边距类 */
.mb-10 {
  margin-bottom: 10px;
}

.mt-20 {
  margin-top: 20px;
}

.mr-10 {
  margin-right: 10px;
}

.ml-10 {
  margin-left: 10px;
}

.p-20 {
  padding: 20px;
}

/* 通用flex布局 */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.items-center {
  align-items: center;
}

.flex-1 {
  flex: 1;
}

/* 页面过渡效果 */
.page-enter-active,
.page-leave-active {
  transition: opacity var(--transition-time), transform var(--transition-time);
}

.page-enter-from {
  opacity: 0;
  transform: translateY(20px);
}

.page-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

/* 元素大小通用类 */
.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

/* 文本对齐 */
.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

/* 文本截断 */
.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 统计数字样式 */
.stat-number {
  font-size: 24px;
  font-weight: bold;
  line-height: 1.2;
}

.stat-title {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 5px;
}

/* 内容页面通用卡片样式 */
.content-card {
  background-color: var(--bg-color);
  border-radius: var(--border-radius-base);
  box-shadow: var(--box-shadow-light);
  margin-bottom: 20px;
  overflow: hidden;
}

.card-header {
  padding: 15px 20px;
  border-bottom: 1px solid var(--border-color-lighter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.card-title .el-icon {
  margin-right: 8px;
}

.card-body {
  padding: 20px;
}
